<template>
  <div>
    <customDialog
      :title="`分销商分类管理`"
      v-if="dialogVisible"
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      :showFoot="false"
      width="600"
    >
      <div class="category_box">
        <el-input
          v-model="name"
          placeholder="请输入分类名称"
          maxlength="20"
          show-word-limit
          @keyup.enter="add"
          style="width: 400px"
        />
        <el-button type="primary" @click="add" style="margin-left: 10px">
          添加分类
        </el-button>
      </div>

      <div class="table_box_wrapper">
        <custom-table
          :loading="loading"
          :columns="columns"
          :tableData="tableData"
          :pageObj="pageObj"
          :isPagination="false"
          :maxHeight="500"
          class="table_box"
        >
          <template #operator="{ scope }">
            <template v-if="!allocatId">
              <el-button
                type="primary"
                size="small"
                @click="handdel(scope.row, '更名')"
              >
                更名
              </el-button>
              <el-button
                type="primary"
                size="small"
                @click="handdel(scope.row, '删除')"
              >
                删除
              </el-button>
            </template>
            <el-button
              v-else
              type="primary"
              size="small"
              @click="handdel(scope.row, '确认')"
            >
              确认修改
            </el-button>
          </template>
        </custom-table>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customTable from "@/components/CustomTable/index.vue";
import customDialog from "@/components/CustomDialog/index.vue";
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import {
  categoryList,
  addCategory,
  updateCategory,
  deleteCategory,
  batchCategory,
} from "@/api/operateCenter/distributor/index";
import type { Action } from "element-plus";
import { debounce } from "lodash-es";

const dialogVisible = ref(false);
const loading = ref<boolean>(false);
const tableData = ref<Array<any>>([]);
interface modelPage {
  pageNo: number;
  pageSize: number;
  total: number;
}
const pageObj = reactive<modelPage>({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});

const allocatId = ref();
const name = ref<string>("");

const columns = reactive([
  { prop: "name", label: "分类名称", minWidth: 150 },
  { prop: "operator", slotName: "operator", label: "操作", width: 150 },
]);

const add = () => {
  if (name.value) {
    addCategory(name.value).then(() => {
      getCategoryList();
      name.value = "";
    });
  }
};

// 操作
const emit = defineEmits(["success"]);
const handdel = (row: Record<string, any>, str: string) => {
  console.log("row---", row, str);
  if (str === "更名") {
    ElMessageBox.prompt("请输入分类名称", "更改分类名称", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPlaceholder: "请填写分类名称",
      inputPattern: /^.{1,20}$/,
      inputErrorMessage: "请输入1-20个以内的字符",
    })
      .then(({ value }) => {
        let params = {
          id: row.id,
          name: value,
        };
        updateCategory(params).then(() => {
          getCategoryList();
        });
        ElMessage.success("更名成功");
      })
      .catch(() => {
        // ElMessage.info("取消修改" );
      });
  } else if (str === "删除") {
    ElMessageBox.alert("确定删除这个分类名称吗？", "提醒", {
      confirmButtonText: "确定",
      callback: (action: Action) => {
        if (action == "confirm") {
          deleteCategory(row.id).then(() => {
            getCategoryList();
            ElMessage.success("删除成功");
          });
        }
      },
    });
  } else if (str === "确认") {
    let params = {
      categoryId: row.id,
      tenantIds: [allocatId.value.toString()],
    };
    batchCategory(params).then(() => {
      ElMessage.success("修改成功");
      emit("success");
      dialogVisible.value = false;
    });
  }
};

// 获取分类管理列表
const getCategoryList = () => {
  categoryList().then((res: any) => {
    tableData.value = res;
  });
};

// 父级电子显示dialog
const showDialog = (val: Record<string, any>) => {
  // console.log("---显示分配分销商----**----", val);

  allocatId.value = val?.id || "";
  dialogVisible.value = true;
  getCategoryList();
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.table_box_wrapper {
  :deep(.el-transfer-panel) {
    width: 36%;
  }
}

.category_box {
  padding: 0 10px;
}
</style>
